<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办任务列表</title>
  <style>
    #app {
      width: 800px;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .content {
      width: 700px;
      margin: 0 auto;
    }

    .title {
      text-align: center;
    }

    .btn {
      height: 40px;
      width: 100px;
      margin-left: 10px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      cursor: pointer;
    }

    .all-count {
      background-color: #1363e3;
      color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
    }

    .unfinish-count {
      background-color: #f4ad07;
      color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
    }

    .task-input {
      width: 430px;
      height: 30px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      font-size: 16px;
    }

    .task-list {
      border-radius: 5px;
      list-style: none;
      padding: 0px;
    }

    .task-list li {
      padding: 5px;
      border: 1px solid #ccc;
      margin-top: 3px;
      border-radius: 5px;
      height:40px;
      line-height: 40px;
    }

    .ckbox {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .done{
      text-decoration: line-through;
      color: #fff;
      background-color: green;
    }

    .normal{
      color: #000;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1 class="title">我的待办任务</h1>
    <div class="content">
      <p>
        <span class="all-count">任务总数：{{ unDoneSum() }} 个</span>
        <span class="unfinish-count">未完成：{{ unDoneCount() }} 个</span>
      </p>
      <p>
        <input class="task-input" placeholder="请输入新待办任务"  type="text" v-model="newTitle"/>
        <button  class="btn" @click="add()">添加任务</button>
        <button  class="btn" @click="del()">清除已完成</button>
      </p>
      <p>
        <h3>任务列表</h3>
      </p>
      <ul class="task-list">
         <li v-for="(taskLists,index) in taskList" :key="index" :class="taskLists.styles">
          <input type="checkbox" class="ckbox" @click="edit(index)" v-model="taskLists.done"/>
          <input type="text" class="task-input" v-show="taskLists.shows" @blur="editText(index)" v-model="taskLists.title"/>
          <span @click="editText(index)" v-show="!taskLists.shows">{{taskLists.title}}</span>
        </li>
        <!--
        <li class="done">
          <input type="checkbox" class="ckbox" />
          <input type="text" class="task-input" style="display: none;" />
          <span>学习React</span>
        </li>
        <li class="normal">
          <input type="checkbox" class="ckbox" />
          <input type="text" class="task-input" style="display: none;" />
          <span>学习Angular</span>
        </li> -->
      </ul>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    // 待办任务列表
    // 文本框中输入新任务内容，点击“添加”按钮将新任务添加到任务列表中。
    // 单击未完成任务文字，切换为输入框显示，重新编辑后，离开焦点自动修改任务内容。
    // 任务已完成可点击前面的复选框，勾选后给li标签移除normal样式，添加done样式，并且未完成任务数需要减一。
    // 顶部显示任务总数、未完成任务数。点击“清除已完成”按钮，则删除所有已完成任务

    // TODO 使用Vue完成上述需求

    new Vue({
      el:'#app',
      data:{
        classA:'',
        newTitle:'',
        taskList:[],
      },
      methods:{
        add(){
          if(this.newTitle != null && this.newTitle != ''){
            this.taskList.push({title:this.newTitle,styles:'normal',done:false,shows:false});
          } else {
            alert("输入代办任务不能为空")
          }
        },
        unDoneSum(){
          return this.taskList.length;
        },
        del(){
          this.taskList = this.taskList.filter(task => !task.done);
        },
        edit(index){
          const tasklists = this.taskList[index];
          if(tasklists.styles == 'normal'){
            tasklists.styles = 'done';
            tasklists.done=true;
          } else {
            tasklists.styles = 'normal';
            tasklists.done=false;
          }
        },
        unDoneCount(){
          return this.taskList.filter(task => !task.done).length;
        },
        editText(index){
          const tasklists = this.taskList[index];
          tasklists.shows = !tasklists.shows ? tasklists.shows = true:tasklists.shows = false;
        }
      }
    })

  </script>
</body>

</html>